import React, { Component } from 'react';
import {SingleInfo,InfoTitle,InfoImage2,DateInfo} from '../common/Forminfo';
import {browserHistory,Link} from 'react-router';
import {UptokenUrl,GetTransportUrl,UpdateTransportUrl} from '../common/url';
import Datetime from 'react-datetime';
import { connect } from 'react-redux';
import { TransportGet } from '../../Redux/Actions/transportAction';

class Transport extends Component {
  constructor(props){
    super(props)
  }

  componentWillMount(){
    const opt = {
      orderId:this.props.location.state.orderId,
      profileId:this.props.location.state.profileId
    }
    this.props.dispatch(TransportGet(this.props.authReducer.user.data.token,opt));
  }

  render() {
    const transport = this.props.transportReducer.transport.data;
    if(transport){
      return (
          <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
              <div className="row">
                  <ol className="breadcrumb">
                  <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
                  <li>运输详情</li>
                  </ol>
              </div>
              <div className="row">
                  <div className="col-lg-12">
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            运输详情
                            <Link className="pull-right btn btn-primary" style={{marginTop:"6px"}} to={this.props.location.state.backurl}>返回</Link>
                            <Link type="button" className="pull-right btn btn-primary" style={{marginTop:"6px",marginRight:"15px"}} to={{pathname:"/main/transportupdate",state:{backurl:this.props.location.state.backurl}}}>
                              编辑
                            </Link>
                        </div>
                        <div className="panel-body">
                            <div className="form-horizontal">
                                <DateInfo label="提单时间" info={transport.oceanBillOfLadingDate}/>
                                <InfoImage2 name="提单照片" src={transport.oceanBillOfLadingUrl} />
                                <DateInfo label="装箱时间" info={transport.vanningDate}/>
                                <InfoImage2 name="装箱照片" src={transport.vanningUrl} />
                                <DateInfo label="发船日期" info={transport.sailingDate}/>
                                <DateInfo label="到港日期" info={transport.arrivalDate}/>
                            </div>
                        </div>
                    </div>
                  </div>
              </div>	
          </div>
      )
    }else{
      return <div></div>
    }
    
  }
}

export default connect((state) => {
    const { authReducer,transportReducer } = state;
    return {
        authReducer,transportReducer
    }
})(Transport);